<template>
  <PageWrapper>
    <BasicTable @register="register">
      <template #tableTitle>
        <TableAction
          :actions="[
            {
              label: '新增',
              type: 'primary',
              size: 'middle',
              icon: 'ant-design:plus-outlined',
              onClick: handleAdd.bind(null, {}),
              auth: ['admin', 'sys:dept:save'],
            },
            {
              label: isExpand ? '折叠' : '展开',
              type: 'primary',
              size: 'middle',
              icon: isExpand ? 'ant-design:menu-fold-outlined' : 'ant-design:menu-unfold-outlined',
              onClick: handleExpandAndCollapse.bind(null),
            },
          ]"
        >
          <template #more>
            <a-button style="margin-left: 8px">更多操作</a-button>
          </template>
        </TableAction>
      </template>
      <template #bodyCell="{ column, record }">
        <div v-if="column.dataIndex == '__ACTION__'">
          <TableAction
            :actions="[
              {
                label: '详情',
                auth: ['admin', 'sys:dept:detail'],
                onClick: handleDetail.bind(null, record),
              },
              {
                label: '编辑',
                auth: ['admin', 'sys:dept:update'],
                onClick: handleEdit.bind(null, record),
              },
            ]"
            :dropDownActions="[
              {
                label: '添加下级',
                auth: ['admin', 'sys:dept:save'],
                icon: 'ant-design:plus-outlined',
                onClick: handleAdd.bind(null, {
                  parentId: record.id,
                }),
              },
              {
                label: '删除',
                popConfirm: {
                  title: '您确定删除该条记录吗？',
                  confirm: handleDelete.bind(null, record),
                },
                auth: ['admin', 'sys:dept:remove'],
                icon: 'ant-design:delete-outlined',
              },
            ]"
          />
        </div>
      </template>
    </BasicTable>
    <DeptFormModal @register="registerModal" @success="reload" />
    <DeptDetailModal @register="registerDetailModal" />
  </PageWrapper>
</template>
<script setup lang="ts">
  import { PageWrapper } from '@/components/Page';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { useModal } from '@/components/Modal';
  import { sysDeptPage, sysDeptRemove } from '@/api/sys/dept';
  import { tableColumns, searchFormSchemas } from './schemas';
  import DeptFormModal from './form.vue';
  import DeptDetailModal from './detail.vue';
  import { message } from 'ant-design-vue';
  import { ref } from 'vue';

  const isExpand = ref(false);
  const [register, tableAction] = useTable({
    rowKey: 'id',
    api: sysDeptPage,
    columns: tableColumns,
    showIndexColumn: false,
    showTableSetting: true,
    useSearchForm: searchFormSchemas.length > 0,
    formConfig: {
      // 搜索表单配置
      labelWidth: 100,
      schemas: searchFormSchemas,
    },
    customRow: undefined,
    isTreeTable: true,
  });
  const { reload, setSelectedRowKeys } = tableAction;
  const [registerModal, { openModal, setModalProps }] = useModal();
  const [registerDetailModal, { openModal: openDetailModal }] = useModal();
  const handleAdd = (record: any) => {
    openModal(true, {
      isUpdate: false,
      record,
    });
    setModalProps({
      title: '新增部门',
    });
  };
  const handleEdit = (record: any) => {
    openModal(true, {
      isUpdate: true,
      record,
    });
    setModalProps({
      title: '修改部门',
    });
  };
  const handleDetail = (record: any) => {
    openDetailModal(true, {
      record,
    });
  };
  // 获取子节点id
  const getChildIds = (record: any) => {
    const ids = [record.id];
    record.children?.forEach((item: any) => {
      ids.push(...getChildIds(item));
    });
    return ids;
  };
  const handleDelete = (record: any) => {
    const ids = getChildIds(record);
    sysDeptRemove({
      ids: ids,
    }).then(() => {
      message.success('删除成功');
      setSelectedRowKeys([]);
      reload();
    });
  };
  /**
   * 展开/折叠
   */
  const handleExpandAndCollapse = () => {
    if (isExpand.value) {
      tableAction.collapseAll();
      isExpand.value = false;
    } else {
      tableAction.expandAll();
      isExpand.value = true;
    }
  };
</script>
<style lang="less" scoped></style>
